<template>
	<view class="pages-model pages">
		<loading v-if="showLoading"></loading>
		<CustomNav title="选择城市" :normal="{textColor:'#fff',background:'linear-gradient(to right, #FF2F34, #FF6B18)'}"
			:is-back="true"></CustomNav>
		<view class="model-content">
			<view class="head-nav">
				<view :class="navIndex==0?'activite':''" class="item" @click="navIndex=0">选省份</view>
				<view class="item contenct"></view>
				<view :class="navIndex==1?'activite':''" class="item" @click="navIndex=1">选城市</view>
				<view class="item contenct"></view>
				<view :class="navIndex==2?'activite':''" class="item">选县/区</view>
			</view>
			<view class="pinpai-block" v-if="navIndex==0">
				<view class="search">
					<view class="search-block">
						<image
							src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/search.png"
							mode="" class="sousuo-btn"></image>
						<input class="search-input" confirm-type="search" placeholder="搜索" type="text"
							v-model="keywords" @confirm="search">
					</view>
				</view>
				<view class="hot">
					<view class="hot-block">
						<text class="title">热门城市</text>
						<view class="keywords">
							<view v-for="(item,index) in hotKeysWords" :key="item.id" class="item"
								@click="selectArea(item)">
								{{ item.city }}
							</view>
						</view>

					</view>
				</view>
				<view class="content">
					<view class="words">
						<scroll-view :scroll-into-view="toView" class="scroll-container" scroll-with-animation="true"
							scroll-y="true" style="height: 572px;">
							<view v-for="(item, index) in carModel" :key="index" :id="item.word" class="words-block">
								<view class="words-index right-text">{{item.word}}</view>
								<view v-for="(item1, index1) in item.list" :key="index1" class="words-container">
									<view class="words-detail-container">
										<view @click="selectCity(item1)" class="words-name right-text">
											{{item1.province}}
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="letter-nav">
						<view v-for="(item, index) in indexList" :key="index" class="item" @click="toSelectIndex(item)">
							{{item}}
						</view>
					</view>
				</view>
			</view>
			<view v-if="navIndex==1" class="chexing">
				<view class="chexing-block">
					<view v-for="(item, index) in cityList" :key="index" class="text-content" @click="selectArea(item)">
						<view class="item">
							<view class="text">{{ item.city }}</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="navIndex==2" class="chexing">
				<view class="chexing-block">
					<view v-for="(item, index) in areaList" :key="index" class="text-content" @click="determine(item)">
						<view class="item">
							<view class="text">{{ item.area }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getEconomizeList,
		getCityByIdApi,
		getAreaByIdApi,
		getHotCityApi
	} from '@/api/region.js'
	import {
		setStorage
	} from '@/util/auth';
	export default {
		data() {
			return {
				keywords: '',
				navIndex: 0,
				//热门词汇
				hotKeysWords: [],
				carModel: [],
				cityList: [],
				areaList: [],
				indexList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N',
					'O', 'P', 'Q', 'R', 'S',
					'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
				],
				toView: '',
				toView1: '',
				toView2: '',
				selectCarSeries: '',
				form: {
					provinceId: 0,
					vehicleModelId: 0
				},
				type: 1
			}
		},
		methods: {
			checkIndex(e) {
				this.navIndex = e
			},
			selectCity(e) {
				this.navIndex = 1
				this.form.provinceId = e.provinceId
				this.getChildList()
			},
			selectArea(e) {
				this.navIndex = 2
				this.form.cityId = e.cityId
				this.getAreaById()
				if (this.type == 2) {
					uni.$emit('cityItem', e)
				}
			},
			determine(item) {
				if (this.type == 1) {
					uni.$emit('selectItem', item)
					setStorage('position', item)
				} else {
					uni.$emit('selectArea', item)
				}
				uni.navigateBack()
			},
			search(e) {
				this.getList()
				this.navIndex = 0
			},
			toSelectIndex(item) {
				this.toView = item
			},
			selectSeries(e) {
				this.selectCarSeries = e
				this.navIndex = 2
			},
			getList() {
				return getEconomizeList({
					keywords: this.keywords
				}).then((res) => {
					this.carModel = res
				})
			},
			getChildList() {
				getCityByIdApi({
					provinceId: this.form.provinceId
				}).then((res) => {
					this.cityList = res
				})
			},
			getAreaById() {
				getAreaByIdApi({
					cityId: this.form.cityId
				}).then((res) => {
					this.areaList = res
				})
			},
			selectType(e) {
				this.form.vehicleModelId = e

			},
			getHotCity() {
				getHotCityApi().then((res) => {
					this.hotKeysWords = res
				})
			},
		},
		async onLoad(e) {
			this.type = e.type
			uni.showCustomLoading();
			Promise.all([this.getList(), this.getHotCity()]).finally(() => {
				uni.hideCustomLoading()
			})
		}
	}
</script>

<style lang="scss" scoped>
	.pages-model {
		width: 100%;
		height: 100%;
		overflow: hidden;

		.model-content {
			margin-top: 180rpx;
			min-height: 100vh;
		}
	}

	.head-nav {
		height: 120rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		gap: 10rpx;

		.item {
			background: #eeeeee;
			height: 50rpx;
			width: 150rpx;
			border-radius: 40rpx;
			font-size: 28rpx;
			margin-top: 50rpx;
			line-height: 50rpx;
			text-align: center;
			color: dimgray;
		}

		.contenct {
			width: 50rpx;
			line-height: 5rpx;
			background-color: #ececed;
			height: 5rpx;
			margin-top: 20rpx;
		}



		.activite {
			background: linear-gradient(to right, #FF2F34, #FF6B18);
			color: white;
		}

	}

	.pinpai-block {
		width: 100%;
		height: 100%;

		margin-top: 20rpx;

		.search {
			width: 100%;
			display: flex;
			justify-content: center;

			.search-block {
				width: 90%;
				background-color: #ececed;
				height: 70rpx;
				border-radius: 35rpx;
				position: relative;
				display: flex;
				align-items: center;

				.sousuo-btn {
					color: #FF2F34;
					line-height: 70rpx;
					margin-left: 30rpx;
					font-size: 36rpx;
					transition: all .3s ease;
					font-weight: bold;
					width: 40rpx;
					height: 40rpx;
				}

				.search-input {
					position: absolute;
					// border: 1px solid red;
					left: 15%;
					top: 0;
					height: 70rpx;
					float: right;
					width: 85%;
					font-size: 28rpx;
				}

			}
		}

		.hot {
			margin-top: 30rpx;
			display: flex;
			justify-content: center;
			width: 100%;

			.hot-block {
				height: 240rpx;
				width: 100%;

				.title {
					font-weight: bold;
					font-size: 32rpx;
					margin-left: 40rpx;
				}

				.keywords {
					width: 90%;
					margin-top: 20rpx;
					margin-left: 40rpx;
				}

				.item {
					float: left;
					text-align: center;
					margin-right: 75rpx;
					font-size: 30rpx;
					width: calc(100% / 4);

					height: 40rpx;
					color: gray;
					margin-top: 18rpx;
				}

				.item:nth-child(3n) {
					margin-right: 0;
				}

			}
		}


	}

	.content {
		width: 100%;
		height: 572px;
		position: relative;
		//overflow: hidden;
	}

	.words {
		position: absolute;
		left: 0;
		width: 100%;
	}

	.scroll-container {
		height: 100vh;

		.words-block {}

		.words-block .words-index {
			background-color: #ededee;
			height: 50rpx;
			font-size: 30rpx;
			line-height: 50rpx;

		}

		.words-detail-container {
			height: 50rpx;
			font-size: 30rpx;
			line-height: 50rpx;
		}

		.right-text {
			padding-left: 30rpx;
			color: black;
			margin-top: 10rpx;
		}
	}

	.letter-nav {
		position: absolute;
		width: 5%;
		right: 0;

		height: 572px;

		.item {
			height: 33rpx;
			text-align: center;
			font-size: 25rpx;
		}
	}

	.chexi {
		margin-top: 30rpx;
		width: 100%;
		display: flex;
		justify-content: center;

		.chexi-block {
			width: 90%;

			.name {
				font-size: 32rpx;
				font-weight: bold;
				color: black;

				.item {
					font-weight: normal;
					margin-top: 30rpx;
				}
			}
		}
	}

	.chexing {
		margin-top: 30rpx;
		width: 100%;
		margin-bottom: 40rpx;

		.chexing-block {

			width: 100%;

			.carSeries {
				font-size: 32rpx;
				font-weight: bold;
				color: black;
				margin-left: 40rpx;

			}

			.text-content {
				font-size: 28rpx;
				padding: 10rpx;

				.name {
					background-color: #ededee;

					.text {
						margin-left: 40rpx;
						height: 50rpx;
						line-height: 50rpx;
						color: black;
					}


				}

				.item {
					width: calc(100% - 20rpx);
					background-color: #f7f6f9;
					padding-left: 10rpx;
					padding-bottom: 14rpx;
					border-bottom: #f4f4f4 1px solid;

					/* margin-top: 30rpx; */
					.text {
						color: black;
						margin-left: 40rpx;
						margin-top: 20rpx;
					}
				}
			}

		}
	}
</style>